<template>
  <div class="mainbody">
    <div class="container">
      <MainTitle :main-title="mainTitle" />
      <div class="view-frame">
        <div class="dropdown_group">
          <div class="dd_item one">
            <div class="label">能源</div>
            <el-select v-model="energyType">
              <el-option v-for="(item,index) in energyOption" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div class="dd_item two">
            <div class="label">设备</div>
            <el-select v-model="factory">
              <el-option v-for="(item,index) in factoryOption" :key="index" :label="item.label" :value="item.value" />
            </el-select>
            <el-select v-model="tech">
              <el-option v-for="(item,index) in techOption" :key="index" :label="item.label" :value="item.value" />
            </el-select>
            <el-select v-model="equipment">
              <el-option v-for="(item,index) in eqmOption" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div class="dd_item">
            <div class="label">时间</div>
            <el-date-picker
              v-model="month"
              type="month"
              placeholder="选择月"
            />
            <button>确定</button>
          </div>
          <button>下载当前报表</button>
        </div>
        <div class="tabel_frame">
          <el-table
            :data="tableData"
            style="width: 100%"
            height="95%"
          >
            <el-table-column v-for="(item,index) in tableList" :key="index" :prop="item.prop" :label="item.label" align="center" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {
    MainTitle: () => import('@/components/MainTitle.vue')
  },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      energyType: '水-DIW',
      factory: 'ARRAY',
      tech: 'CVD',
      produceLine: 'TDDRY100',
      equipment: 'all',
      month: '2021-1',
      energyOption: [{
        value: '水-DIW',
        label: '水-DIW'
      }, {
        value: '水-PCW',
        label: '水-PCW'
      }, {
        value: '水-UPW',
        label: '水-UPW'
      }, {
        value: '水-H2W',
        label: '水-H2W'
      }, {
        value: '电',
        label: '电'
      }, {
        value: 'CDA',
        label: 'CDA'
      }],
      factoryOption: [{
        value: 'ARRAY',
        label: 'ARRAY'
      }, {
        value: 'TOUCH',
        label: 'TOUCH'
      }, {
        value: 'EL',
        label: 'EL'
      }],
      techOption: [{
        value: 'CVD',
        label: 'CVD'
      }, {
        value: 'IMP',
        label: 'IMP'
      }, {
        value: 'TEST',
        label: 'TEST'
      }, {
        value: 'WET',
        label: 'WET'
      }, {
        value: 'DRY',
        label: 'DRY'
      }, {
        value: 'ELA',
        label: 'ELA'
      }, {
        value: 'PVD',
        label: 'PVD'
      }, {
        value: 'PHOTO',
        label: 'PHOTO'
      }],
      produceOption: [{
        value: 'TDDRY100',
        label: 'TDDRY100'
      }, {
        value: 'TDDRY200',
        label: 'TDDRY200'
      }, {
        value: 'TDDRY300',
        label: 'TDDRY300'
      }, {
        value: 'TDDRY400',
        label: 'TDDRY400'
      }, {
        value: 'TDDRY500',
        label: 'TDDRY500'
      }, {
        value: 'TDDRY600',
        label: 'TDDRY600'
      }, {
        value: 'TDDRY700',
        label: 'TDDRY700'
      }, {
        value: 'TDDRY800',
        label: 'TDDRY800'
      }],
      eqmOption: [{
        value: 'all',
        label: '全部设备'
      }, {
        value: 'TDDDC110',
        label: 'TDDDC110'
      }, {
        value: 'TDDDC210',
        label: 'TDDDC210'
      }, {
        value: 'TDDDC310',
        label: 'TDDDC310'
      }, {
        value: 'TDDDC410',
        label: 'TDDDC410'
      }, {
        value: 'TDDDC510',
        label: 'TDDDC510'
      }, {
        value: 'TDDDC610',
        label: 'TDDDC610'
      }, {
        value: 'TDDDC710',
        label: 'TDDDC710'
      }, {
        value: 'TDDDC810',
        label: 'TDDDC810'
      }],
      tableList: [
        { label: '时间|项目', prop: 'date' },
        { label: 'TDDDC110', prop: 'TDDDC110' },
        { label: 'TDDDC111', prop: 'TDDDC111' },
        { label: 'TDDDC112', prop: 'TDDDC112' },
        { label: 'TDDDC113', prop: 'TDDDC113' },
        { label: 'TDDDC114', prop: 'TDDDC114' },
        { label: 'TDDDC115', prop: 'TDDDC115' },
        { label: 'TDDDC116', prop: 'TDDDC116' },
        { label: 'TDDDC117', prop: 'TDDDC117' }],
      tableData: [
        {
          date: '2021-01-01',
          TDDDC110: '5555',
          TDDDC111: '5555',
          TDDDC112: '5555',
          TDDDC113: '5555',
          TDDDC114: '5555',
          TDDDC115: '5555',
          TDDDC116: '5555',
          TDDDC117: '5555'
        },
        {
          date: '2021-01-02',
          TDDDC110: '5555',
          TDDDC111: '5555',
          TDDDC112: '5555',
          TDDDC113: '5555',
          TDDDC114: '5555',
          TDDDC115: '5555',
          TDDDC116: '5555',
          TDDDC117: '5555'
        },
        {
          date: '2021-01-03',
          TDDDC110: '5555',
          TDDDC111: '5555',
          TDDDC112: '5555',
          TDDDC113: '5555',
          TDDDC114: '5555',
          TDDDC115: '5555',
          TDDDC116: '5555',
          TDDDC117: '5555'
        },
        {
          date: '2021-01-01',
          TDDDC110: '5555',
          TDDDC111: '5555',
          TDDDC112: '5555',
          TDDDC113: '5555',
          TDDDC114: '5555',
          TDDDC115: '5555',
          TDDDC116: '5555',
          TDDDC117: '5555'
        },
        {
          date: '2021-01-01',
          TDDDC110: '5555',
          TDDDC111: '5555',
          TDDDC112: '5555',
          TDDDC113: '5555',
          TDDDC114: '5555',
          TDDDC115: '5555',
          TDDDC116: '5555',
          TDDDC117: '5555'
        },
        {
          date: '2021-01-01',
          TDDDC110: '5555',
          TDDDC111: '5555',
          TDDDC112: '5555',
          TDDDC113: '5555',
          TDDDC114: '5555',
          TDDDC115: '5555',
          TDDDC116: '5555',
          TDDDC117: '5555'
        },
        {
          date: '2021-01-01',
          TDDDC110: '5555',
          TDDDC111: '5555',
          TDDDC112: '5555',
          TDDDC113: '5555',
          TDDDC114: '5555',
          TDDDC115: '5555',
          TDDDC116: '5555',
          TDDDC117: '5555'
        },
        {
          date: '2021-01-01',
          TDDDC110: '5555',
          TDDDC111: '5555',
          TDDDC112: '5555',
          TDDDC113: '5555',
          TDDDC114: '5555',
          TDDDC115: '5555',
          TDDDC116: '5555',
          TDDDC117: '5555'
        },
        {
          date: '2021-01-01',
          TDDDC110: '5555',
          TDDDC111: '5555',
          TDDDC112: '5555',
          TDDDC113: '5555',
          TDDDC114: '5555',
          TDDDC115: '5555',
          TDDDC116: '5555',
          TDDDC117: '5555'
        },
        {
          date: '2021-01-01',
          TDDDC110: '5555',
          TDDDC111: '5555',
          TDDDC112: '5555',
          TDDDC113: '5555',
          TDDDC114: '5555',
          TDDDC115: '5555',
          TDDDC116: '5555',
          TDDDC117: '5555'
        },
        {
          date: '2021-01-01',
          TDDDC110: '5555',
          TDDDC111: '5555',
          TDDDC112: '5555',
          TDDDC113: '5555',
          TDDDC114: '5555',
          TDDDC115: '5555',
          TDDDC116: '5555',
          TDDDC117: '5555'
        },
        {
          date: '2021-01-01',
          TDDDC110: '5555',
          TDDDC111: '5555',
          TDDDC112: '5555',
          TDDDC113: '5555',
          TDDDC114: '5555',
          TDDDC115: '5555',
          TDDDC116: '5555',
          TDDDC117: '5555'
        },
        {
          date: '2021-01-01',
          TDDDC110: '5555',
          TDDDC111: '5555',
          TDDDC112: '5555',
          TDDDC113: '5555',
          TDDDC114: '5555',
          TDDDC115: '5555',
          TDDDC116: '5555',
          TDDDC117: '5555'
        },
        {
          date: '2021-01-01',
          TDDDC110: '5555',
          TDDDC111: '5555',
          TDDDC112: '5555',
          TDDDC113: '5555',
          TDDDC114: '5555',
          TDDDC115: '5555',
          TDDDC116: '5555',
          TDDDC117: '5555'
        },
        {
          date: '2021-01-01',
          TDDDC110: '5555',
          TDDDC111: '5555',
          TDDDC112: '5555',
          TDDDC113: '5555',
          TDDDC114: '5555',
          TDDDC115: '5555',
          TDDDC116: '5555',
          TDDDC117: '5555'
        }
      ]
    }
  },
  computed: {
    mainTitle() {
      return this.title
    }
  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
  .mainbody{
  height: 100vh;
  background: url('~@assets/report/bg.png') no-repeat;
  background-size: 100% 100%;
  .container{
    position: relative;
    width: 92%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-flow: column;
    .view-frame{
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-around;
      height: 89%;
      overflow-y:scroll;
      // 隐藏滚动条
      &::-webkit-scrollbar {// 兼容Chrome
        display: none;
      }
      &::-o-scrollbar {// 兼容Opera
        display: none;
      }
      scrollbar-width: none;// 兼容Firefox
      -ms-overflow-style: none;// 兼容edge
      .dropdown_group{
        height: 10%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .dd_item{
          height: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .label{
            font-size: 1.6rem;
          }
          button{
            width: 7rem;
            height: 3.5rem;
            background: transparent;
            font-size: 1.6rem;
            border: 1px solid rgba(233, 232, 232, 0.5);
            outline: none;
            color: #FFF;
            line-height: 3.3rem;
            margin: 0 2rem;
          }
        }
        button{
            width: 13rem;
            height: 4rem;
            background: transparent;
            font-size: 1.6rem;
            border: 1px solid rgba(233, 232, 232, 0.5);
            outline: none;
            color: #FFF;
            line-height: 3.8rem;
          }
        /deep/.el-input__suffix {
          right: 20px;
        }
        /deep/.el-input__prefix {
          left: 12px;
        }
        /deep/.el-input--suffix /deep/.el-input__inner{
          width: 13rem;
          height: 3.5rem;
          background: transparent;
          border: 1px solid rgba(233, 232, 232, 0.5);
          border-radius: 0;
          padding-left: 2rem;
          margin-left: 1rem;
          color: #FFF;
          font-weight: 600;
        }
        /deep/.el-input__icon{
          line-height: 3.5rem;
        }
        /deep/.el-date-editor.el-input, .el-date-editor.el-input__inner {
          width: 15rem;
        }
      }
      .tabel_frame{
        height: 85%;
        /deep/.el-table {
          font-size: 1.3rem;
          background: transparent;
        }
        /deep/.el-table::before {
          height: 0px;
        }
        /deep/.has-gutter th {
          padding: 0 !important;
        }
        /deep/.el-table--medium th,
        .el-table th,
        .el-table td {
          text-align: center;
        }
        /deep/.el-table thead {
          background: #064093;
        }
        /deep/.el-table .el-table__header-wrapper th {
          background: #064093;
        }
        /deep/.el-table th.is-leaf,
            /deep/ .el-table td {
              border-bottom: 1px solid #073d78;
            }
        /deep/.el-table th > .cell {
          padding: 0;
          height: 4.5rem;
          line-height: 4.5rem;
        }
        /deep/.el-table tr {
          background-color: transparent;
        }
        // /deep/.el-table tr:hover {
        //   background: #06295f;
        // }
        /deep/.el-table .cell{
          color: #FFF;
        }
        /deep/.el-table .el-table__header-wrapper th,
        /deep/.el-table .el-table__fixed-header-wrapper th {
          color: #fff;
          font-size: 1.3rem;
        }
        /deep/.el-table--scrollable-y .el-table__body-wrapper {
          &::-webkit-scrollbar {
            // 兼容Chrome
            display: none;
          }
          &::-o-scrollbar {
            // 兼容Opera
            display: none;
          }
          scrollbar-width: none; // 兼容Firefox
          -ms-overflow-style: none; // 兼容edge
        }
        /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
          background-color: #041b3d;
        }
      }
    }
  }
  }
</style>
